<template>
  <div class="notifications__setting">
    <div class="setting__user-info">
      <div class="setting__user-detail">
        <div class="user-avatar">
          <img :src="userInfo.avatar_url" />
        </div>
        <div class="user-path">
          <div class="user-name">{{ userInfo.name }}</div>
          <div class="user-username">@{{ userInfo.login }}</div>
        </div>
      </div>
      <a class="logout-text" href='' @click="logout">退出登录</a>
    </div>
    <div class="setting-base">
      <h3>基础设置</h3>
      <div>
        <label class="setting-label">
          消息拉取间隔
        </label>
        <el-radio-group v-model="form.fetchApiTimes">
          <el-radio v-for="item of selectTimes" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </div>
    </div>

    <div class="setting-window">
      <h3>系统通知设置</h3>
      <div>
        <label class="setting-label">有人 @ 我</label>
        <el-radio-group v-model="form.mentionMe">
          <el-radio v-for="item of notifyTypes" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </div>

      <div>
        <label class="setting-label">通知信息</label>
        <el-radio-group v-model="form.noticeMe">
          <el-radio v-for="item of notifyTypes" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </div>

      <div>
        <label class="setting-label">私信</label>
        <el-radio-group v-model="form.privateMessage">
          <el-radio v-for="item of notifyTypes" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </div>
    </div>

    <div class="setting__submit-button">
      <el-button type="primary" plain @click="submit">保存设置</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Setting',
  data () {
    return {
      form: {
        fetchApiTimes: this.$store.state.notify.fetchApiTimes,
        mentionMe: this.$store.state.notify.mentionMe,
        noticeMe: this.$store.state.notify.noticeMe,
        privateMessage: this.$store.state.notify.privateMessage
      },
      selectTimes: [
        { label: '3s', value: 3000 },
        { label: '10s', value: 10000 },
        { label: '60s', value: 60000 }
      ],
      notifyTypes: [
        { label: '从不', value: 0 },
        { label: '总是', value: 1 }
      ]
    }
  },
  methods: {
    submit () {
      this.$store.dispatch('notify/setSettingForm', this.form)
    },
    logout () {
      this.$store.dispatch('notify/clearPollInterval')
      this.$store.dispatch('user/logout')
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.user.userInfo
    }
  }
}
</script>
